<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>async属性的使用(The use of asynchronous attribute)</title>
  <script src="./js/test.js" async></script>
  <script src="./js/demo.js" async></script>
  <!-- 
  在HTML中，async  属性用于 <script`  标签，以控制 JavaScript 文件的加载和执行。与 defer  属性类似，async  也用于优化网页的性能和用户体验，但它的工作方式略有不同。
  一、async  属性的定义
  - 定义：async  属性是一个布尔属性，表示当脚本被下载后，应该立即执行该脚本，而不等待文档的解析完成。
  - 用法：通常与外部 JavaScript 文件一起使用，即 <scriptsrc="..."></scriptsrc=>` 。

  二、async  属性的特点
  1. 异步加载：
    - 使用 async  属性的脚本会在文档解析过程中异步加载，浏览器可以在下载脚本的同时继续解析 HTML。这意味着脚本的下载不会阻塞文档的解析。

  2. 立即执行：
    - 一旦脚本下载完成，浏览器会立即执行该脚本，而不管文档是否已经完全解析。这可能会导致脚本在 DOM 还未完全构建时就执行，因此在脚本中访问 DOM 元素时需要小心。

  3. 乱序执行：
    - 如果文档中有多个使用 async  属性的脚本，它们的执行顺序是不确定的，取决于哪个脚本先下载完成。这与 defer  属性不同，后者会按照在文档中出现的顺序执行。

 总结
  - async  属性用于 script 标签，允许脚本异步加载并立即执行。
  - 使用 async  可以提高页面加载性能，避免阻塞 HTML 的解析。
  - 由于脚本可以乱序执行，因此在使用 async  属性时，开发者需要确保脚本之间没有依赖关系。
   -->
</head>
<body>

  <p>
    script1js`  和 script2js`  会异步加载，并在下载完成后立即执行，执行顺序不确定。
  </p>

  <div id="app">app</div>
  <div id="title">title</div>
  <div id="nav">nav</div>
  <div id="product">product</div>

  <h1>async属性的使用(The use of asynchronous attribute)</h1>
  <div class="box"></div>
  
</body>
</html>